<link rel="import" href="../bower_components/paper-styles/element-styles/paper-material-styles.html">

<dom-module id="custom-paper-material-styles">
  <template>
    <style>
      .paper-material {
        display: block;
        position: relative;
        border-radius: 2px;
        height: 100%;
        padding: 16px 0 16px 0;
        width: calc(98.66% - 16px);
        margin: 16px auto;
        background: white;

        @apply --shadow-elevation-2dp;
      }

      /* Small */
      @media (max-width: 600px) {
        .paper-material {
          --menu-container-display: none;
          width: calc(97.33% - 32px);
          padding-left: 8px;
          padding-right: 8px;
        }
      }

      /* extra narrow */
      @media (max-width: 405px) {
        .paper-material {
          padding-left: 8px;
          padding-right: 8px;
          margin: 0;
          width: calc(100% - 16px);
        }
      }

      /* Tablet+ */
      @media (min-width: 601px) {
        .paper-material {
          width: calc(98% - 46px);
          margin-bottom: 32px;
          padding-left: 22px;
          padding-right: 22px;
        }
      }
    </style>
  </template>
</dom-module>
